//引入路由对象
import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
  createMemoryHistory,
  RouteRecordRaw,
} from "vue-router";

//vue2 mode history vue3 createWebHistory
//vue2 mode  hash  vue3  createWebHashHistory
//vue2 mode abstact vue3  createMemoryHistory

//路由数组的类型 RouteRecordRaw
// 定义一些路由
// 每个路由都需要映射到一个组件。
declare module "vue-router"{
    interface RouteMeta{
        title:string,
        transition:string
    }
}
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "/",
    alias: ["/root1", "/root2"],// 别名设置
    component: () => import("../components/ref.vue"),
    meta:{
        title:"首页",
        transition:"animate__flipOutY"
    }
  },
  {
    path: "/reactive",
    // redirect:"/",重定向
    component: () => import("../components/reactive.vue"),
    meta:{
        title:"reactive",
        transition:"animate__rotateInDownLeft"
    }
  },
  {
    path: "/to",
    component: () => import("../components/to.vue"),
  },
  {
    path: "/computed",
    component: () => import("../components/computed.vue"),
  },
  {
    path: "/watch",
    component: () => import("../components/watch.vue"),
  },
  {
    path: "/watchEffect",
    component: () => import("../components/watchEffect.vue"),
  },
  {
    path: "/lifeCycle",
    component: () => import("../components/lifeCycle.vue"),
  },
  {
    path: "/zujianchuanzhi",
    component: () => import("../components/zujianchuanzhi.vue"),
  },
  {
    path: "/zujian",
    component: () => import("../components/zujian.vue"),
  },
  {
    path: "/activeZujian",
    component: () => import("../components/activeZujian.vue"),
  },
  {
    path: "/chacao",
    component: () => import("../components/chacao.vue"),
  },
  {
    path: "/await",
    component: () => import("../components/await/index.vue"),
  },
  {
    path: "/teleport",
    component: () => import("../components/teleport.vue"),
  },
  {
    path: "/keepAlive",
    component: () => import("../components/keepAlive/index.vue"),
  },
  {
    path: "/transition",
    component: () => import("../components/transition/transition.vue"),
  },
  {
    path: "/transition-group",
    component: () => import("../components/transition/transition-group.vue"),
  },
  {
    path: "/transition-group2",
    component: () => import("../components/transition/transition-group2.vue"),
  },
  {
    path: "/provide-inject",
    component: () => import("../components/provide-inject/index.vue"),
  },
  {
    path: "/bus",
    component: () => import("../components/bus/index.vue"),
  },
  {
    path: "/Tsx",
    component: () => import("../components/Tsx.vue"),
  },
  {
    path: "/model",
    component: () => import("../components/model/index.vue"),
  },
  {
    path: "/directive",
    component: () => import("../components/directive/index.vue"),
  },
  {
    path: "/Hooks",
    component: () => import("../components/Hooks/index.vue"),
  },
  {
    path: "/css",
    component: () => import("../components/css/css.vue"),
  },
  {
    path: "/pinia",
    component: () => import("../components/pinia/pinia.vue"),
  },
  {
    path: "/routerIndex",
    component: () => import("../components/router/index.vue"),
  },
  {
    path: "/testRouter",
    name: "TestRouter",
    component: () => import("../components/router/testRouter.vue"),
  },
  // 需要设置动态路由参数的时候可以使用下面配置
  // {
  //     path: '/testRouter/:content',
  //     name:"TestRouter",
  //     component: () => import('../components/router/testRouter.vue')
  // }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior: (to, from, savePosition) => {
    console.log(to, '==============>', savePosition);
    return new Promise((r) => {
      setTimeout(() => {
        r({
          top: savePosition?.top
        })
      }, 2000);
    })
}

});

//导出router
export default router;
